<template>
  <div id="app_container">
    <div id="app_main" v-show="!isAdd">
      <!-- 顶部标题&导航 -->
      <Top></Top>
      <!-- 商户卡片区 -->
      <Cards></Cards>
    </div>
    <div v-if="isAdd">
        <AddForm></AddForm>
    </div>
  </div>
</template>

<script setup>
import Top from "./components/Top.vue"
import Cards from "./components/Cards.vue"
import AddForm from "./components/AddForm.vue"
import { useInfoStore } from './stores/info'
import { watch, ref } from "vue";

const info = useInfoStore();
let isAdd = ref(false); // 新增状态

// 监听新增是否触发，决定是否显示新增表单
watch(
  () => info.addFlag,
  (newValue, oldValue) => {
    isAdd.value = newValue;
  }
)

</script>

<style scoped>
* {
  font-family: "幼圆";
}


</style>
